<template>
  <div>
    <!-- 标题区域 -->
    <h2>{{ taskDetailStore.detail.task_name }}的任务</h2>
    <div>
      <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
      <el-button type="primary" @click="import_data">继续导入数据</el-button>
    </div>
    <div>
    <!-- 表格区域 -->
      <el-table :data="taskDetailStore.tableData" style="width: 100%">
        <!-- 表格列配置 -->
        <el-table-column prop="id" label="ID" width="100"></el-table-column>
        <el-table-column prop="name" label="任务名"></el-table-column>
        <el-table-column prop="create_time" label="创建时间"></el-table-column>
        <el-table-column prop="" label="操作">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="view(scope.row)"
            >开始追踪</el-button>
            <el-button link type="success" size="small" @click="trend(scope.row)"
            >查看走向</el-button>
            <el-button link type="danger" size="small" @click="del(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
        <!-- 其他列配置 -->
      </el-table>
    </div>
    <!-- 分页区域 -->
    <br>
    <div class="page_right">
      <el-pagination
        @current-change="taskDetailStore.current_change"
        background
        layout="prev, pager, next"
        :total="taskDetailStore.total"
        default-page-size="taskDetailStore.pageSize"/>
    </div>

  <!--弹出添加页面-->
    <el-dialog v-model="dialogFormVisible" title="创建子任务">
      <el-form :model="form">
        <el-form-item label="子任务名称:" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handlerAdd">
          添加
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {useTaskDetailStore,useTaskStore,usePageShowStore,useSubTaskStore,useTrendStore} from '../stores/index'

const taskDetailStore = useTaskDetailStore()
const taskStore = useTaskStore()
const pageShowStore = usePageShowStore()
const subTaskStore = useSubTaskStore()
const trendStore = useTrendStore()


//查看
const view = (row) => {
  subTaskStore.detail = row
  subTaskStore.init()
  pageShowStore.active = "3-1"

}
//删除
const del = (id) => {
  const sql = `DELETE FROM "sub_task" WHERE "id" = ${id};`
  window.send_main.exec_db(sql, (result) => {console.log(result)// 处理查询结果
    })
  taskDetailStore.loadData()
}

const trend = (row) => {
  trendStore.loadData(row)
  pageShowStore.active = "3-2"
}

const import_data = () => {
  taskStore.upload_task_id = taskDetailStore.detail.id //设置当前任务ID
  pageShowStore.active = "1-2"
}

//添加页面弹出层
import { reactive, ref } from 'vue'

const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const handlerAdd = () =>{

  const sql = `INSERT INTO "sub_task" ("p_id", "create_time", "name") VALUES (${taskDetailStore.detail.id}, "${new Date().toLocaleString()}", "${form.name}"); `
  window.send_main.exec_db(sql, (result) => {console.log(result)})
  //刷新当前页面
  taskDetailStore.loadData()
  form.name = ""
  dialogFormVisible.value = false //关闭弹出框
}



</script>
<style scoped>
.footer_right{
  float: right;
  margin-top: 200px;
}
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
